<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="14">
        <el-card>
          <div class="filter-container">
            <el-input v-model="queryModel.name" placeholder="字典名称" class="filter-item" style="width: 200px;" clearable />

            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
              查询
            </el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-plus" @click="handleEdit(0)">
              新增
            </el-button>
          </div>
          <el-table
            v-loading="listLoading"
            :data="list"
            border
            highlight-current-row
            style="width: 100%"
            @current-change="handleCurrentChange"
          >
            <el-table-column label="序号" type="index" width="70" />
            <el-table-column label="字典名称" prop="name" />
            <el-table-column label="描述" prop="remarks" />
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" size="mini" type="button" @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button icon="el-icon-edit" size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination v-show="total > 0" :total="total" :page-num.sync="queryModel.pageNum" :page-size.sync="queryModel.pageSize" @pagination="fetchList" />

          <el-dialog v-if="showDialog" :title="formId ? '编辑' : '新增'" width="25%" :visible.sync="showDialog">
            <Form ref="dataForm" :form-id="formId" @submitSuccess="showDialog=false; fetchList()" />
            <div slot="footer">
              <el-button @click.native="showDialog = false">取消</el-button>
              <el-button type="primary" @click.native="submitForm">提交</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card>
          <div slot="header">
            <span>字典详情</span>
            <el-button v-if="currentRow.id" style="float:right;margin-top:-10px;" type="primary" icon="el-icon-plus" @click="handleEditDictData(0)">新增</el-button>
          </div>
          <div v-if="!currentRow.id" style="font-size: 12px;border-left: 5px solid #ddd;line-height: 20px;padding: 10px;">
            点击查看字典详情
          </div>
          <el-table
            v-else
            v-loading="dictDataListLoading"
            :data="dictData"
            border
            style="width: 100%"
          >
            <el-table-column label="所属字典" prop="dictName" />
            <el-table-column label="字典标签" prop="label" />
            <el-table-column label="字典值" prop="value" />
            <el-table-column label="排序" prop="sort" />
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button icon="el-icon-edit" size="mini" type="button" @click="handleEditDictData(scope.row.id)">编辑</el-button>
                <el-button icon="el-icon-edit" size="mini" type="danger" @click="handleDeleteDictData(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog v-if="showDictDataDialog" :title="formId ? '编辑' : '新增'" width="25%" :visible.sync="showDictDataDialog">
            <DictDataForm ref="dictDataForm" :form-id="formId" :dict-id="currentRow.id" @submitSuccess="showDictDataDialog=false; findDictData(currentRow.id)" />
            <div slot="footer">
              <el-button @click.native="showDictDataDialog = false">取消</el-button>
              <el-button type="primary" @click.native="submitDictDataForm">提交</el-button>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Form from './form'
import DictDataForm from './dictDataForm'
export default {
  components: { Pagination, Form, DictDataForm },
  data() {
    return {
      list: [],
      dictData: [],
      total: 0,
      listLoading: false,
      dictDataListLoading: false,
      showDialog: false,
      showDictDataDialog: false,
      formId: 0,
      queryModel: {
        pageNum: 1,
        pageSize: 20,
        name: null
      },
      currentRow: {}
    }
  },
  mounted() {
    this.fetchList()
  },
  methods: {
    submitForm() {
      this.$refs.dataForm.submitForm()
    },
    submitDictDataForm() {
      this.$refs.dictDataForm.submitForm()
    },
    fetchList() {
      this.listLoading = true
      this.$api.dict.listPage(this.queryModel).then(res => {
        this.listLoading = false
        this.total = res.data.pagination.total
        this.list = res.data.data
      })
    },
    handleFilter() {
      this.fetchList()
    },
    handleDelete(id) {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$api.dict.remove(id).then(res => {
          this.fetchList()
        })
      }).catch(() => {
      })
    },
    handleEdit(id) {
      this.showDialog = true
      this.formId = id
    },
    handleEditDictData(id) {
      this.showDictDataDialog = true
      this.formId = id
    },
    handleDeleteDictData(id) {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$api.dictdata.remove(id).then(res => {
          this.findDictData(this.currentRow.id)
        })
      }).catch(() => {
      })
    },
    handleCurrentChange(row) {
      if (!row) {
        this.currentRow = {}
      } else {
        this.currentRow = row
        this.findDictData(row.id)
      }
    },
    findDictData(dictId) {
      this.dictDataListLoading = true
      this.$api.dict.findDictData(dictId).then(res => {
        this.dictDataListLoading = false
        this.dictData = res.data
      })
    }
  }
}

</script>
<style scoped>
</style>
